<template>
	<basic-layout>
		<template v-slot:content-main>
			<div class="contact-page">
				<rich-text>
					<div v-html="configInfo.configValue"></div>
					<!-- <div v-for="(item) in configInfo" :key="item.configId" class="c-div">
						<span class="title">{{ item. configName + '：'}}</span>
						<span class="content">{{ item.configValue }}</span>
						<br />
					</div> -->
					<!-- <span class="title">应聘邮箱:</span>
					<span class="content">xxxx@163.com</span>
					<br />
					<span class="title">其他:</span>
					<span class="content">xxxxxx</span>
					<br />
					<span class="title">公司地址:</span>
					<span class="content">
						新天地新里店:上海市黄浦区黄陂南路380号新天地新里6层
						<br />
						<br />
						红创PARK店:南京市鼓楼区红山创意工厂产业园F15A楼5-6层
						<br />
						<br />
						河西金鹰店:南京市建邺区金鹰世界A座11层<br />
					</span> -->
				</rich-text>
			</div>
		</template>
		<template v-slot:content-side>
			<rich-text>
				<div v-html="contactInfo.configValue" class="contact-page2"></div>
			</rich-text>
			<!-- <top-img-list-m v-if="devicePdMode === 'mp'"></top-img-list-m>
			<top-img-list v-if="devicePdMode === 'pc'"></top-img-list> -->
		</template>
	</basic-layout>
</template>

<script>
import { mapGetters } from "vuex";
import BasicLayoutBody from "@/components/layout/BasicLayoutBody";
import RichText from "@/components/RichText";
// import TopImgListM from "@/components/TopImgListM";
// import TopImgList from "@/components/TopImgList";
import { getConfigList } from '@/api';

export default {
	components: {
		"basic-layout": BasicLayoutBody,
		"rich-text": RichText,
		// TopImgListM,
		// TopImgList
	},
	data() {
		return {
			loading: false,
			configInfo: {
				configValue: ''
			},
			// 联系方式-公司图片
			contactInfo: {
				configValue: ''
			}
		};
	},
	computed: {
		...mapGetters(['devicePdMode']),
	},
	created() {
		this.getConfigInfo();
	},
	methods: {
		getConfigInfo() {
			if(!sessionStorage.getItem('businessConfigInfo') || !sessionStorage.getItem('contactConfigInfo')) {
				// configType 配置类型（1-基本信息  2-SEO信息  3-业务信息）
				getConfigList({configType: 3}).then((res) => {
					if(res.code == 200) {
						const arr1 = res.data.filter(item => item.configKey == 'business_contact');
						const arr2 = res.data.filter(item => item.configKey == 'business_contact_company');
						this.configInfo = arr1[0];
						this.contactInfo = arr2[0];
						sessionStorage.setItem('businessConfigInfo', JSON.stringify(arr1[0]));
						sessionStorage.setItem('contactConfigInfo', JSON.stringify(arr2[0]));
					}
				}).catch((err) => {
					
				});
			} else {
				this.configInfo = JSON.parse(sessionStorage.getItem('businessConfigInfo') || '{}');
				this.contactInfo = JSON.parse(sessionStorage.getItem('contactConfigInfo') || '{}');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.qr-code {
		transition: all 0.2s ease;
		width: 150px;
		margin-bottom: 10px;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
		-ms-interpolation-mode: nearest-neighbor;
		&:hover {
			width: 300px;
		}
	}
	.title{
		font-size: 14px;
		color: #7f7f7f;
	}
	.content{
		padding-top: 10px;
		font-weight: 800;
		font-size: 14px;
		color: #272727;
	}
	.c-div{
		display: flex;
		flex-direction: column;
	}
	@media (min-width: 1200px) {
		.contact-page{
			padding: 0px 10px;
		}
		.contact-page ::v-deep p {
			padding: 0px 0;
		}
	}
	
	@media (max-width: 1200px) {
		.contact-page {
			padding: 0px 22px;
		}
		.contact-page ::v-deep p {
			padding: 0px 0;
		}
		.img-content {
			// padding: 0 25px;
			margin-top: 15px;
			.img-container{
				width: 100%;
			}
			.each-img{
				width: 100%;
			}
		}
		.qr-code {
			width: 100%;
			margin-bottom: 0;
		}
	}

	.contact-page2{
		::v-deep img{
			width: 100%;
		}
	}
</style>